<template>
  <div>
    <v-app v-if="loading">
      <v-overlay :opacity="0">
          <v-progress-linear
              style="width: 400px"
              indeterminate
              rounded
              stream
              height="6"
          ></v-progress-linear>
      </v-overlay>
    </v-app>

    <component v-else v-bind:is="layout"></component>
  </div>
</template>

<script>
import axios from "axios";
import DashboardLayout from './layouts/Dashboard';
import DefaultLayout from './layouts/Default';
import ChatLayout from './layouts/Chat';
import { mapGetters } from 'vuex';

export default{
  data: () => ({
      loading: true
  }),

  computed: {
    ...mapGetters([
      'layout',
    ]),
  },

  components: {
    'dashboard': DashboardLayout,
    'chat': ChatLayout,
    'default': DefaultLayout,
  },

  created() {
      this.who()
  },

  methods: {
      who() {
          this.loading = true;
          const that = this;
          axios.get(`/who`).then((response) => {
              that.$store.dispatch("user", response.data.data);
          })
          .catch(function () {})
          .then(function () {
              that.loading = false
          });
      },
  }
};
</script>

<style></style>
